<template>
  <div class="feedbackContainer">
    <el-card>
      <el-tabs v-model="activeName" @tab-click="tabClick">
        <!-- 表格区域 -->
        <el-tab-pane label="反馈单选择" name="first">
          <el-row class="rowForSearch">
            <el-col :span="6">
              <!-- 搜索 -->
              <el-input
                placeholder="请输入内容"
                v-model="search"
                clearable
                @change="searchClick"
              >
              </el-input>
            </el-col>
            <el-col :span="2">
              <el-button
                type="primary"
                icon="el-icon-search"
                @click="searchClick"
                >搜索</el-button
              >
            </el-col>
          </el-row>
          <!-- 表格 -->
          <el-row :gutter="10">
            <!-- 表格 -->
            <el-table :data="feedbackQuestion" style="width: 100%">
              <el-table-column prop="questionId" label="反馈单号">
              </el-table-column>
              <el-table-column prop="userId" label="学/工号"></el-table-column>
              <el-table-column prop="questionType" label="反馈事件类型">
                <template slot-scope="scope">
                  <el-tag type="danger" v-if="scope.row.questionType == '1'"
                    >快递丢件</el-tag
                  >
                  <el-tag type="info" v-else>其他问题</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="questionNumber"
                label="物流单号"
              ></el-table-column>
              <el-table-column prop="quuestionIdentify" label="问题解决情况">
                <template slot-scope="scope">
                  <el-tag
                    type="success"
                    v-if="scope.row.questionIdentify == '1'"
                  >
                    已答复
                  </el-tag>
                  <el-tag type="danger" v-else>未答复</el-tag>
                </template>
              </el-table-column>
              <el-table-column
                prop="createTime"
                label="创建时间"
              ></el-table-column>
              <!-- 操作区 -->
              <el-table-column label="操作">
                <!-- 插槽 slot-scope="scope" -->
                <template slot-scope="scope">
                  <el-button
                    type="info"
                    size="small"
                    @click="selectButton(scope)"
                    v-if="scope.row.questionIdentify == '0'"
                    >未回复</el-button
                  >
                  <el-button type="success" @click="answeredClick" size="small" v-else>已回复</el-button>
                  <el-button
                    type="danger"
                    size="small"
                    @click="deleteSingle(scope)"
                    >撤销</el-button
                  >
                </template>
              </el-table-column>
            </el-table>
          </el-row>
          <!-- 分页 -->
          <!-- 
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
       -->
          <el-row :gutter="10">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[8, 16, 24, 32]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="parseInt(totalNumber)"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              @prev-click="handleCurrentChange"
              @next-click="handleCurrentChange"
            >
            </el-pagination>
          </el-row>
        </el-tab-pane>
        <el-tab-pane label="反馈信息" name="second" :disabled="secondDisable">
          <el-descriptions title="反馈信息">
            <el-descriptions-item label="学/工号">{{
              descriptionTab.userId
            }}</el-descriptions-item>
            <el-descriptions-item label="运单号">{{
              descriptionTab.questionNumber
            }}</el-descriptions-item>
            <el-descriptions-item label="事件类型">
              <el-tag type="danger" v-if="descriptionTab.questionType == '1'"
                >快递丢件</el-tag
              >
              <el-tag type="danger" v-else-if="descriptionTab.questionType == '2'">快递错拿</el-tag>
              <el-tag type="danger" v-else-if="descriptionTab.questionType == '3'">快递未找到</el-tag>
              <el-tag type="info" v-else>其他问题</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="创建时间">
              {{ descriptionTab.createTime }}
            </el-descriptions-item>
            <el-descriptions-item label="是否答复">
              <el-tag
                type="success"
                v-if="descriptionTab.questionIdentify == '1'"
              >
                已答复
              </el-tag>
              <el-tag type="danger" v-else>未答复</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="问题内容">
              {{ descriptionTab.questionContent }}
            </el-descriptions-item>
          </el-descriptions>
          <el-input
            type="textarea"
            :rows="20"
            placeholder="请输入答复内容"
            v-model="descriptionTab.answerContent"
            label="回复内容"
          >
          </el-input>
          <el-button type="primary" size="medium" class="submitAnswer" @click="submitAnswer"
            >提交答复</el-button
          >
        </el-tab-pane>
      </el-tabs>
    </el-card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Feedback",
  data() {
    return {
      // 分页
      pageSize: "",
      currentPage: "",
      totalNumber: "",
      activeName: "first",
      secondDisable: true,
      // 反馈表格搜索内容
      search: "",
      // 反馈表格数据对象
      feedbackQuestion: [],
      // 描述栏数据
      descriptionTab: {
      },
    };
  },
  created() {
    this.currentPage = 1;
    this.pageSize = 8;
    this.search = "";
    this.getFeedbackData(this.currentPage, this.pageSize, this.search);
  },
  methods: {
    answeredClick(){
      this.$message.warning("该反馈已经回答");
    },
    // 获取全部数据
    async getFeedbackData(currentPage, pageSize, search) {
      this.feedbackQuestion = [];
      const { data: res } = await axios({
        method: "GET",
        url: `/api/feedbackQuestion/getFeedbackData/${currentPage}/${pageSize}`,
        params: {
          query: search,
        },
      });
      if (res.code == 200) {
        console.log(res);
        // 数据模型赋值
        for (let i = 0; i < res.data.list.length; i++) {
          var item = {};
          item.createTime = res.data.list[i].createTime;
          item.questionContent = res.data.list[i].questionContent;
          item.questionId = res.data.list[i].questionId;
          item.questionIdentify = res.data.list[i].questionIdentify;
          item.questionNumber = res.data.list[i].questionNumber;
          item.questionType = res.data.list[i].questionType;
          item.userId = res.data.list[i].userId;
          this.feedbackQuestion.push(item);
        }
        // 更新页码
        this.currentPage = res.data.pages;
        this.pageSize = res.data.pageSize;
        this.totalNumber = res.data.total;
      } else {
        this.$message.error("服务器错误，请稍后重试");
      }
    },
    // 显示条数发生改变
    handleSizeChange(e) {
      this.pageSize = e;
      this.currentPage = 1;
      this.getFeedbackData(this.currentPage, this.pageSize, this.search);
    },
    // 页码发生改变
    handleCurrentChange(e) {
      this.currentPage = e;
      this.getFeedbackData(this.currentPage, this.pageSize, this.search);
    },
    // 搜索触发
    searchClick() {
      this.feedbackQuestion = [];
      this.currentPage = 1;
      this.getFeedbackData(this.currentPage, this.pageSize, this.search);
    },
    deleteSingle(scope) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(async () => {
          const { data: res } = await axios({
            method: "DELETE",
            url: "/api/feedbackQuestion/removeOne",
            params: {
              questionId: scope.row.questionId,
            },
          });
          console.log(res);
          if (res.code == 200) {
            this.$message.success("删除成功");
            this.getFeedbackData(this.currentPage, this.pageSize, this.search);
          } else {
            this.$message.error("服务器错误，请稍后重试！");
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    // 选择按钮事件
    selectButton(scope) {
      this.descriptionTab = {};
      // 切换页面
      this.secondDisable = false;
      this.activeName = "second";
      // 数据赋值
      this.descriptionTab.questionId = scope.row.questionId;
      this.descriptionTab.questionType = scope.row.questionType;
      this.descriptionTab.questionNumber = scope.row.questionNumber;
      this.descriptionTab.questionIdentify = scope.row.questionIdentify;
      this.descriptionTab.createTime = scope.row.createTime;
      this.descriptionTab.questionContent = scope.row.questionContent;
      this.descriptionTab.userId = scope.row.userId;
    },
    tabClick(event) {
      if (event.index == "0") {
        this.secondDisable = true;
      }
    },
    // 提交回复
    async submitAnswer(){
     
      const {data : res} = await axios({
        method: 'PUT',
        url: '/api/feedbackQuestion/answer',
        data: this.descriptionTab
      })
      if (res.code == 200) {
        this.$message.success("反馈成功");
        this.getFeedbackData(this.currentPage,this.pageSize,this.search);
        this.activeName = "first";
        this.secondDisable = true;
      }else {
        this.$message.error("反馈失败，请稍后重试");
      }
    }
  },
};
</script>

<style>
/* 公共样式修改 */
.feedbackContainer {
  height: 100%;
  padding: 50px;
}
.feedbackContainer .el-card {
  margin-top: 0px;
  margin-right: 0px;
}
/* 处理表格间距 */
.feedbackContainer .el-card .el-row:nth-child(2) {
  margin-top: 30px;
}
/* 处理分页间距 */
.feedbackContainer .el-card .el-row:nth-child(3) {
  margin-top: 30px;
}
/* tab栏 */
.feedbackContainer .el-tabs__item.is-active {
  color: #ff84b4;
}
.feedbackContainer .el-tabs__item:hover {
  color: #ff84b4;
}
.feedbackContainer .el-tabs__active-bar {
  background-color: #ff84b4;
}
/* 描述栏 */
.feedbackContainer .el-descriptions {
  margin-top: 20px;
}
/* 描述栏按钮 */
.feedbackContainer .submitAnswer {
  margin-top: 20px;
}
/* 描述栏按钮布局 */
.feedbackContainer div#pane-second {
  text-align: end;
}
/* 文本域 */
.feedbackContainer .el-textarea__inner:focus {
  border-color: #ff84b4;
}
.rowForSearch {
  margin-top: 20px;
}
</style>